<template>
  <Modal :model-value="visible" width="80%" :mask-closable="false" @on-cancel="handleClose">
    <div class="template-container">
      <div class="template-left">
        <div class="template-left-title">
          <Icon class="template-icon" type="ios-albums" size="32" />
          <span>模板列表</span>
        </div>
        <ul v-for="item in state.types" :key="item.key">
          <li
            @click="handleClick(item)"
            :class="`${item.key === state.currentActive?.key ? 'active' : ''}`"
          >
            <Icon :type="item.icon" size="18" :color="item.color" />
            <span>{{ item.text }}</span>
          </li>
        </ul>
      </div>
      <div class="template-right">
        <div class="user-search">
          <Icon class="search-icon" type="ios-search" size="24" />
          <input placeholder="搜索相册名称" />
        </div>
        <div class="template-right-title">{{ state.currentActive?.text || '' }}</div>
        <ul class="template-right-list">
          <li>
            <div class="template-img-box">
              <Image
                class="template-img"
                src="https://picsum.photos/200/300"
                lazy
                fit="contain"
                width="90%"
                height="90%"
              />
              <div class="template-img-btns">
                <div class="template-img-preview">预览</div>
                <div class="template-img-use">使用</div>
              </div>
            </div>
            <div class="template-title">这里是标题</div>
            <div class="template-desc">
              <label>官</label>
              <span>免费</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </Modal>
</template>

<script name="templates" setup lang="ts">
defineProps(['visible']);
const emit = defineEmits(['handle-close']);

const state = reactive({
  types: [
    {
      key: 'best',
      text: '精选推荐',
      icon: 'md-clock',
      color: 'rgb(74, 83, 250)',
    },
    {
      key: 'baby',
      text: '宝宝成长',
      icon: 'md-ionitron',
      color: 'rgb(0, 196, 204)',
    },
    {
      key: 'master',
      text: '宠物日记',
      icon: 'logo-octocat',
      color: 'rgb(236, 152, 9)',
    },
    {
      key: 'baby01',
      text: '人物写真',
      icon: 'md-cut',
      color: 'rgb(139, 61, 255)',
    },
    {
      key: 'baby02',
      text: '奇闻异物',
      icon: 'md-nuclear',
      color: 'rgb(181, 25, 99)',
    },
    {
      key: 'baby03',
      text: '寿比南山',
      icon: 'md-walk',
      color: 'rgb(255, 59, 75)',
    },
    {
      key: 'baby04',
      text: '十岁快乐',
      icon: 'md-contacts',
      color: 'rgb(210, 105, 230)',
    },
    {
      key: 'baby05',
      text: '周岁纪实',
      icon: 'md-color-palette',
      color: 'rgb(255, 59, 75)',
    },
    {
      key: 'baby06',
      text: '情侣日常',
      icon: 'md-print',
      color: 'rgb(139, 61, 255)',
    },
  ],
  currentActive: null,
});

const handleClick = (item) => {
  state.currentActive = item;
};

const handleClose = () => {
  emit('handle-close');
};

onMounted(() => {
  state.currentActive = state.types[0];
});
</script>

<style lang="less" scoped>
.template-container {
  display: flex;

  .template-left {
    width: 210px;
    border-right: 1px solid var(--color--border-float);

    .template-left-title {
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .template-icon {
        color: var(--primary-color);
      }

      span {
        color: var(--color-text-block);
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap;
        padding-left: 4px;
      }
    }

    ul {
      li {
        margin-bottom: 2px;
        cursor: pointer;
        width: 200px;
        height: 32px;
        line-height: 32px;
        margin-left: -6px;
        padding-left: 8px;
        border-radius: 6px;
        transition: all 0.2s ease-in-out;

        &:hover,
        &.active {
          background-color: var(--background-primary-color);
          color: var(--primary-color);
        }

        span {
          font-size: 13px;
          font-weight: 400;
          padding-left: 6px;
        }
      }
    }
  }

  .template-right {
    padding: 0 24px;

    .user-search {
      display: flex;
      align-items: center;
      width: 300px;
      height: 40px;
      border: 1px solid var(--third-color);
      border-radius: 8px;
      padding: 0 8px;

      .search-icon {
        margin-right: 6px;
        color: var(--third-color);
      }

      input {
        outline: none;
        border: none;
        flex: 1;
      }
    }

    .template-right-title {
      font-size: 16px;
      color: var(--color-text-block);
      margin: 20px 0;
      font-weight: bold;
    }

    .template-right-list {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 200px;
        border: 1px solid var(--color--border-float);
        border-radius: 6px;
        overflow: hidden;
        padding-bottom: 6px;

        .template-img-box {
          height: 150px;
          position: relative;
          background-color: var(--background-primary-color);

          &:hover {
            .template-img-btns {
              opacity: 1;
            }

            .template-img {
              opacity: 0;
            }
          }

          .template-img {
            opacity: 1;
            transition: all 0.3s ease-in-out;
            margin-left: 5%;
            margin-top: 4%;
          }

          .template-img-btns {
            transition: all 0.3s ease-in-out;
            position: absolute;
            opacity: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .template-img-preview,
            .template-img-use {
              width: 50%;
              height: 100%;
              line-height: 30px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .template-img-preview {
              background-color: var(--background-primary-color);
            }

            .template-img-use {
              background-color: var(--primary-color-hover);
            }
          }
        }

        .template-title {
          font-size: 14px;
          line-height: 22px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 6px 10px;
        }

        .template-desc {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;

          label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border: 1px solid var(--color--border-float);
            border-radius: 10px;
            font-size: 12px;
            /* color: var(--primary-color); */
            background-color: var(--secondary-color);
          }

          span {
            display: inline-block;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 2px;
            background-color: var(--color--border-float);
          }
        }
      }
    }
  }
}
</style>
